<template>
    <div class="conversations-layout w-[300px] pt-[20px]">
        <div class="logo-area flex items-center mb-8">
            <img style="object-fit: cover" class="w-[80px] h-[80px] mr-[10px] rounded-[40px]" src="@/assets/logo.png"
                alt="logo" />
            <div class="logo-text text-[20px] font-bold">ChatGPT</div>
        </div>

        <div class="conversation-action flex flex-col justify-center items-center">
            <el-button class="w-full mb-[20px]" type="primary" @click="createNewSession">新建对话</el-button>
            <el-button class="w-full" style="margin-left: 0px;">AI智能体</el-button>
        </div>

        <div class="conversations-list">
            <div v-for="item in sessions" class="conversation-item" :key="item.id">
                <div class="text_ellipsis conversation-title" @click="switchSession(item.id)">

                    {{ item.title }}
                </div>
                <img src="@/assets/icons/more.png" class="more-icon" />
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { useChatStore } from '@/store/chatstore';
const { sessions, createNewSession, switchSession } = useChatStore();


</script>

<style scoped lang="scss">
.conversations-layout {
    background-color: #f7f7f7;

    >div {
        width: 268px;
        margin: 0 auto;
    }

    .conversation-action {
        margin-top: 20px;
    }

    .conversations-list {
        height: calc(100vh - 230px);
        overflow-y: auto;
        margin-top: 20px;

        .conversation-item {
            height: 38px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 16px;
            border-radius: 4px;
            @extend .text_ellipsis;
            transition: all linear 0.3s;
            line-height: 38px;
            width: 100%;

            .more-icon {
                display: none;
                width: 20px;
                height: 20px;

                cursor: pointer;

            }

            &:hover {
                background-color: #e4e7ed;

                .more-icon {
                    display: block;
                }

                .conversation-title {
                    width: calc(100% - 30px);
                }
            }
        }
    }
}
</style>
